<template>
  <div
    class="vpc-network-vm-container vpc-network-table content-wrapper el-card el-card__body is-always-shadow"
  >
    <div
      class="vpc-network-list"
      :class="{ 'vpc-network-list-fold': !foldStatus }"
    >
      <div
        v-for="(item, index) in vpcNetworkList"
        :key="index"
        class="vpc-network-list-item"
        :class="{ 'vpc-network-list-item-active': activeIndex === index }"
        @click="vpcNetworkClick(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div
      class="vpc-network-list-content"
      :class="{ 'vpc-network-list-content-fold': !foldStatus }"
    >
      <Overviews :vpcNode="vpcNode" v-if="activeIndex === 0"></Overviews>
      <ApiConfig :vpcNode="vpcNode" v-else-if="activeIndex === 1"></api/topoConfig>
      <RouteConfig
        :vpcNode="vpcNode"
        v-else-if="activeIndex === 2"
      ></RouteConfig>
      <EffectRoute
        :vpcNode="vpcNode"
        v-else-if="activeIndex === 3"
      ></EffectRoute>
      <DHCP :vpcNode="vpcNode" v-else-if="activeIndex === 4"></DHCP>
      <FireWall :vpcNode="vpcNode" v-else-if="activeIndex === 5"></FireWall>
    </div>
    <img
      src="@/assets/topo/left.png"
      alt=""
      class="vpc-network-list-fold-common vpc-network-list-icon-fold"
      v-if="foldStatus"
      @click="foldStatus = !foldStatus"
    />
    <img
      src="@/assets/topo/right.png"
      alt=""
      class="vpc-network-list-fold-common vpc-network-list-icon-expand"
      v-else
      @click="foldStatus = !foldStatus"
    />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import Overviews from '@/views/simulation/networkManage/vpcNetwork/children/overviews.vue';
import ApiConfig from '@/views/simulation/networkManage/vpcNetwork/children/api/topoConfig.vue';
import RouteConfig from '@/views/simulation/networkManage/vpcNetwork/children/routeConfig.vue';
import EffectRoute from '@/views/simulation/networkManage/vpcNetwork/children/effectRoute.vue';
import DHCP from '@/views/simulation/networkManage/vpcNetwork/children/DHCP.vue';
import FireWall from '@/views/simulation/networkManage/vpcNetwork/children/firewall/index.vue';

const vpcNode = ref(null);
// 节点数据
const props = defineProps({
  node: null,
});

// 列表选中状态
const activeIndex = ref(0);

// 监听传递过来的节点数据
watch(
  () => props.node,
  val => {
    vpcNode.value = val;

    if (
      JSON.parse(sessionStorage.getItem('activeIndex')) &&
      JSON.parse(sessionStorage.getItem('activeIndex'))['vpc']
    ) {
      activeIndex.value = JSON.parse(sessionStorage.getItem('activeIndex'))[
        'vpc'
      ];
    }
  },
  { immediate: true },
);

// 折叠状态
const foldStatus = ref(true);

const vpcNetworkList = ref([
  { name: '基础信息', type: 1 },
  { name: '接口配置', type: 2 },
  { name: '路由配置', type: 3 },
  { name: '生效路由表', type: 4 },
  { name: 'DHCP', type: 5 },
  { name: '防火墙', type: 6 },
]);

/**
 * vpn网络列表点击
 */
const vpcNetworkClick = index => {
  activeIndex.value = index;
  let indexObj = JSON.parse(sessionStorage.getItem('activeIndex'));
  sessionStorage.setItem(
    'activeIndex',
    JSON.stringify({ ...indexObj, vpc: index }),
  );
};
</script>
<style lang="scss" scoped>
.vpc-network-vm-container {
  border: 1px solid #e0e7ef;
  display: flex;
  flex-direction: row;
  position: relative;
}

.vpc-network-table {
  padding-top: 0;
  margin: 0 16px 16px;
  height: calc(100vh - 300px);
}

.vpc-network-list {
  width: 120px;
  margin: 12px 0;
  text-align: left;

  * {
    user-select: none;
  }

  .vpc-network-list-item {
    height: 42px;
    line-height: 42px;
    padding-left: 12px;
    margin-right: 12px;
    cursor: pointer;
  }

  .vpc-network-list-item-active {
    background-color: #eff6ff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: bolder;
  }
}

.vpc-network-list-fold {
  display: none;
}

.vpc-network-list-content {
  width: calc(100% - 120px);
}

.vpc-network-list-content-fold {
  width: 100%;
}

.vpc-network-list-fold-common {
  width: 10px;
  height: 75px;
  position: absolute;
  top: 50%;
  margin-top: -37.5px;
  cursor: pointer;

  &:hover {
    transform: scale(1.2);
  }
}

.vpc-network-list-icon-fold {
  left: 125px;
}

.vpc-network-list-icon-expand {
  left: 0;
}
</style>
